<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <image class="back-img-box" :mode="item.mode" :src="backImg"></image>
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!name" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="name" :src="avatarImg" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
          <view v-if="name" class="user-info">
            <view class="u-title">{{ name }}</view>
            <view class="u-title-fu">{{ phone }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="wallet-box" :style="walletOuterBg">
      <view>
        <view class="money-text">{{ money }}</view>
        <view>账户余额</view>
      </view>
      <view class="view-btn" @click="linkToWallet">查看</view>
    </view>
    <view class="menu-list">
      <view class="list-cell" @click="goToPage('/packageA/pages/report/index')">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="dashboardPath" style="padding: 3px"></image>
          </view>
          <view class="til">报表管理</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageA/pages/whiteList/index')"
        v-show="whitelistAuthShow && saleShow">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="whitelPath"></image>
          </view>
          <view class="til">审核白名单</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageB/pages/supplier/index')"
        v-show="supplierAuthShow && purchaserShow">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="supplierPath"></image>
          </view>
          <view class="til">供应商管理</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageB/pages/product/index')"
        v-show="productAuthShow  && purchaserShow">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="productPath"></image>
          </view>
          <view class="til">产品管理</view>
        </view>
      </view>
      <view v-show="blackListAuth && purchaserShow" class="list-cell"
        @click="goToPage('/packageB/pages/blackList/index')">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="blackListPath"></image>
          </view>
          <view class="til">黑名单管理</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageB/pages/mine/adress/index')"
        v-show="locatAuthShow  && purchaserShow">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="locatPath"></image>
          </view>
          <view class="til">地址管理</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageB/pages/mine/unloader/index')"
        v-show="unloaderAuthShow  && saleShow">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="locatPath"></image>
          </view>
          <view class="til">卸货地址</view>
        </view>
      </view>
      <view class="list-cell" @click="goToPage('/packageB/pages/mine/updatePwd/updatePwd')">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="passwordPath"></image>
          </view>
          <view class="til">修改密码</view>
        </view>
      </view>
      <view class="list-cell" @click="handleLogout">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="logoutPath"></image>
          </view>
          <view class="til">退出登录</view>
        </view>
      </view>
    </view>

    <view>
      <!--解绑 提示窗示例 -->
      <uni-popup ref="UnbindDialog" type="dialog">
        <uni-popup-dialog :type="success" cancelText="关闭" confirmText="同意" title="通知" content="如果解绑,将不能继续微信授权登录,确认是否解绑!"
          @confirm="unindConfirm"></uni-popup-dialog>
      </uni-popup>
      <!--绑定 提示窗示例 -->
      <uni-popup ref="bindDialog" type="dialog">
        <uni-popup-dialog :type="success" cancelText="关闭" confirmText="同意" title="通知" content="确定是否要绑定该微信账号"
          @confirm="bindConfirm"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  import storage from '@/utils/storage';
  import { getButtonShow } from '@/utils/common.js';
  import {
    getBindWxStatus,
    getUnbindWx,
    getBindWx,
    getPhone,
    getAccountData
  } from '@/api/me.js';
  import { getTotalBalance } from "@/api/customerAccount"
  import { getOpenId, getDriverId, getTenantId, getAccountIdentity } from '@/utils/auth.js';
  import constant from '@/utils/constant';
  import config from '@/config';

  export default {
    data() {
      return {
        name: this.$store.state.user.name,
        phone: undefined,
        isBindWx: '',
        money: '0.00',
        dashboardAuth: false,
        blackListAuth: false,
        supplierAuthShow: false,
        whitelistAuthShow: false,
        productAuthShow: false,
        locatAuthShow: false,
        unloaderAuthShow: false,
        authriotyFlagWaybill: false,
        authriotyFlagBlack: false,
        authriotyFlagViolation: false,
        menuItemCurViolation: undefined,
        menuItemCurWaybill: undefined,
        menuItemCurBlack: undefined,
        userId: ''
      };
    },
    onPullDownRefresh() {
      wx.stopPullDownRefresh();
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar;
      },
      dashboardPath() {
        return config.baseImgUrl + '/dashboard-icon.png';
      },
      configBoardPath() {
        return config.baseImgUrl + '/configBoard-icon.png';
      },
      supplierPath() {
        return config.baseImgUrl + '/supplier.png';
      },
      whitelPath() {
        return config.baseImgUrl + '/whitel.png';
      },
      productPath() {
        return config.baseImgUrl + '/product.png';
      },
      blackListPath() {
        return config.baseImgUrl + '/blackList.png';
      },
      locatPath() {
        return config.baseImgUrl + '/locat.png';
      },
      passwordPath() {
        return config.baseImgUrl + '/reset-password.png';
      },
      logoutPath() {
        return config.baseImgUrl + '/logout1.png';
      },
      windowHeight() {
        console.log('我的windowHeight~', uni.getSystemInfoSync());
        this.userId = getDriverId();
        if (this.userId != undefined) {
          this.getphone(this.userId);
        }
        return uni.getSystemInfoSync().windowHeight - 50;
      },
      curColor() {
        return this.$store.state.user.curTypeColor;
      },
      imagesCamera() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/camera1.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/camera.png';
        } else {
        }
      },
      backImg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/profile_red.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/profile_blue.png';
        } else {
          return config.baseImgUrl + '/profile_blue.png';
        }
      },
      avatarImg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/user_.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/user.png';
        } else {
          return config.baseImgUrl + '/user.png';
        }
      },
      walletOuterBg() {
        return `background: url(${config.baseImgUrl}/wallet-bg.png) no-repeat;background-size: cover;`;
      },
      purchaserShow() {
        return !getAccountIdentity() || getAccountIdentity() === 0
      },
      saleShow() {
        return getAccountIdentity() === 1
      }
    },
    onShow() {
      this.getAccountDataFn();
      // this.getBlackListAuth();
      this.getWxStatus();
      this.getAuthShowData();
    },
    methods: {
      async getAccountDataFn() {
        if (getAccountIdentity() === 1) {
          this.getSaleTotalBalance()
        } else {
          this.purchaserTotalBalance()
        }
      },
      async getSaleTotalBalance() {
        const data = {
          tenantId: getTenantId(),
          userId: getDriverId(),
          smallProgramType: 1
        }
        const res = await getTotalBalance(data)
        if (res.code === '200') {
          this.money = res?.data?.balanceTotal || 0.00
        } else {
          toast(res.msg)
        }
      },
      async purchaserTotalBalance() {
        const res = await getAccountData();
        if (res.code === 0) {
          this.money = (res.data?.amountTotal || 0)?.toFixed(2);
        } else {
          toast(res.msg)
        }
      },
      async getAuthShowData() {
        this.blackListAuth = await getButtonShow('caixiaoduan:blackList');
        this.supplierAuthShow = await getButtonShow('caixiaoduan:supplier');
        this.whitelistAuthShow = await getButtonShow('caixiaoduan:reviewWhitelist');
        this.productAuthShow = await getButtonShow('caixiaoduan:product');
        this.locatAuthShow = await getButtonShow('caixiaoduan:locat');
        this.unloaderAuthShow = await getButtonShow('caixiaoduan:unloader');
      },
      linkToWallet() {
        if (getAccountIdentity() === 1) {
          this.$tab.navigateTo(
            '/packageA/pages/customerAccount/index'
          );
        } else {
          this.$tab.navigateTo(
            `/packageA/pages/my-wallet/myWallet?money=${this.money}`
          );
        }
      },
      async getphone(userId) {
        try {
          console.log('userId: ', userId);
          let res = await getPhone(userId);
          console.log('getPhone: ', res);
          if (res.code == 200) {
            if (res.data) {
              if (res.data.length >= 7) {
                this.phone =
                  res.data.substring(0, 3) +
                  '****' +
                  res.data.substring(res.data.length - 4);
              } else {
                this.phone = res.data;
              }
            }
          }
        } catch (e) {
          return false;
        }
      },
      handleToLogout() {
        console.log('tuichu');
      },
      async unindConfirm() {
        console.log('确定');
        try {
          let res = await getUnbindWx();
          if (res.code == 0) {
            this.isBindWx = false;
            uni.showToast({
              title: `解绑通过`
            });
          }
        } catch (e) {
          return false;
        }
      },
      async bindConfirm() {
        let data = getOpenId();
        console.log(data, 'getOpenId');
        try {
          let res = await getBindWx(data);
          if (res.code == 0) {
            this.$tab.switchTab('/pages/mine/index');
            uni.showToast({
              title: `绑定成功`
            });
            this.getWxStatus();
          }
        } catch (e) {
          return false;
        }
      },
      async getWxStatus() {
        try {
          let res = await getBindWxStatus();
          if (res.code == 0) {
            this.isBindWx = res.data;
          }
        } catch (e) {
          return false;
        }
      },
      HandleUnbind() {
        this.$refs.UnbindDialog.open();
      },
      handleBind() {
        this.$refs.bindDialog.open();
      },
      handleToLogin() {
        this.$tab.reLaunch('/packageB/pages/login');
      },
      goToPage(url) {
        this.$tab.navigateTo(url);
      },
      openPrivacyContract() {
        wx.openPrivacyContract({
          success: (res) => {
            console.log('openPrivacyContract success');
          },
          fail: (res) => {
          }
        });
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/packageB/pages/login');
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mine-container {
    width: 100%;
    height: 100%;
    font-size: 26.66rpx;

    .back-img-box {
      width: 100vw;
      height: 160px;
      background-color: #eeeeee;
      position: absolute;
      z-index: -1;
    }

    .more-icon {
      .iconfont {
        position: relative;
        top: 39rpx;
        right: -8rpx;
      }
    }

    button {
      height: 30px !important;
      line-height: 30px !important;
      position: absolute;
      right: 17rpx;
    }

    .header-section {
      padding: 15px;
      color: white;

      .login-tip {
        font-size: 32rpx;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 35.55px;
        }
      }

      .user-info {
        margin-left: 15px;
        font-size: 24.88rpx;

        .u-title {
          line-height: 30px;
          font-weight: bold;
          font-size: 32rpx;
        }

        .u-title-fu {
          line-height: 30px;
        }
      }
    }

    .wallet-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #573800;
      border-radius: 14.22rpx;
      margin: 0 26.67rpx 32rpx 26.67rpx;
      padding: 26.67rpx 26.67rpx 21.33rpx 26.67rpx;

      .money-text {
        font-size: 42.67rpx;
        font-weight: 600;
      }

      .view-btn {
        border-radius: 47rpx;
        padding: 8rpx 17.78rpx;
        background-color: #ffffff;
      }
    }
  }
</style>